<template>
    <div class="login-page">
        <TopComponent></TopComponent>
        <div class="forget-main">
            <h1 class="forget-title">忘记密码</h1>
            <div class="forget-form">
                <div class="form-item">
                    <span class="name">国籍：</span>
                    <select name="nationCode" placeholder="请选择" class="input">
                        <option value="86">中国 86</option>
                        <option value="852">中国香港 852</option>
                        <option value="886">中国台湾 886</option>
                        <option value="853">中国澳门 883</option>
                        <option value="65">新加坡 65</option>
                        <option value="60"> 马来西亚 60</option>
                        <option value="84">越南 84</option>
                        <option value="82">韩国 82</option>
                        <option value="234">尼日利亚 234</option>
                        <option value="27">南非 27</option>
                    </select>
                </div>
                <div class="form-item">
                    <span class="name">手机：</span>
                    <input type="text" placeholder="请输入手机号" class="input">
                    <span class="error-tip" style="display: none">号码格式错误</span>
                </div>
                <div class="form-item">
                    <span class="name">验证码：</span>
                    <input type="text" placeholder="请输入验证码" maxlength="6" class="input">
                    <span class="authcode disable">获取验证码</span>
                    <span class="error-tip" style="display: none">验证码格式错误</span>
                </div>
                <div class="form-item">
                    <span class="name">密码：</span>
                    <input type="password" placeholder="8-16位,数字和字母组成" class="input">
                    <span class="error-tip" style="display: none">8-16位，必须包含数字和字母。</span>
                </div>
                <div class="form-item">
                    <span class="name">确认密码：</span>
                    <input type="password" placeholder="请再次输入密码" class="input">
                    <span class="error-tip" style="display: none">两次密码输入不一致</span>
                </div>
                <div class="form-btn" @click="changeRoute('/')">重置密码</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'login'
    }
</script>

<style lang="scss">
    .login-page {
        min-height: 100%;
        background: url(../../assets/img/bg.png);
        background-size: 100% 100%;
    }
    .forget-main{
        width: 5.4rem;
        height: 9.8rem;
        position: absolute;
        top: calc(50% - 4.9rem);
        left: calc(50% - 2.7rem);
        .forget-title{
            font-size: 0.48rem;
            color: #fff;
            text-align: center;
            font-weight: 400;
        }
        .forget-form{
            background-color: #fff;
            width: 5.4rem;
            height: 8.3rem;
            margin: 0.48rem auto;
            border-radius: 0.2rem;
            padding: 0.4rem 0.6rem 0.56rem;
            font-size: 28px;
            color: #435069;
            .form-item{
                position: relative;
                border-bottom: 0.02rem solid #e5e5e5;
                margin-top: 0.4rem;
                white-space: nowrap;
                .name{
                    font-size: 0.28rem;
                }
                .input{
                    border: none;
                    outline: none;
                    font-size: 0.28rem;
                    width: 3rem;
                    background-color: transparent!important;
                    -webkit-appearance: none;
                }
                .error-tip{
                    display: block;
                    position: absolute;
                    font-size: 0.24rem;
                    color: #e22828;
                    bottom: -0.4rem;
                }
                .authcode{
                    position: absolute;
                    right: 0;
                    bottom: 0.04rem;
                    width: 1.4rem;
                    text-align: center;
                    line-height: 0.34rem;
                    border: 0.02rem solid #e60816;
                    background-color: #fff;
                    border-radius: 1rem;
                    font-size: 0.24rem;
                    color: #e60816;
                }
            }
            .form-btn{
                width: 3rem;
                height: 0.6rem;
                line-height: 0.6rem;
                background-color: #e60816;
                color: #fff;
                font-size: 0.26rem;
                border-radius: 0.3rem;
                text-align: center;
                margin: 0 auto;
                margin-top: 1.2rem;
            }
        }
    }
</style>
